<template>
    <div class="home">

        <!--banner图片  -->
        <div class="banner">
            <div class="bg">
                <el-carousel height="475px">
                    <el-carousel-item v-for="item in bannerList" :key="item.id">
                        <img :src="$staticPath + item.imageAddress" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="text">
                <div class="title">{{ bannerTitle[0].productTitle || '' }}</div>
                <div class="deputy">
                    <div v-for="item in bannerClassify" :key="item.id">{{ item.productTitle }}</div>
                </div>
                <div class="fot" v-html="bannerDesc[0].productDescribe"></div>
            </div>
        </div>

        <!-- 定制软件开发  -->
        <div class="customized bx">
            <div class="develop">{{ customTitle[0].productTitle || '' }}</div>
            <div class="dream">{{ customTitle[0].productShortTitle || '' }}</div>
            <div class="box">
                <div v-for="(item, index) in custom" :key="item.id" class="wnwu" :class="{ wnwu1: getIsPhont }">
                    <img :src="$staticPath + item.productImageAddress" alt="" />
                    <div class="cc">{{ item.productTitle }}</div>
                    <div class="open">{{ item.productShortTitle }}</div>
                    <div @click="goto(index)" class="look">查看详情</div>
                </div>
            </div>
        </div>

        <!--软件开发产品-->
        <div class="software bx">
            <div class="product">{{ applicationTiele[0].productTitle || '' }}</div>
            <div class="procedure">{{ applicationTiele[0].productShortTitle || '' }} </div>
            <div class="standard">
                <div v-for="(item, index) in projectList" :key="index" class="standard-line">
                    <div v-if="item.length == 2" class="line">
                        <div v-for="(projectItem, index) in item" :key="projectItem.id"
                            :class="{ 'tow-l': index == 0, 'tow-r': index == 1 }">
                            <div :class="{ 'tow-left': index == 0, 'tow-left1': index == 1 }">
                                <img :src="$staticPath + projectItem.productImageAddress" alt="">
                            </div>
                            <div :class="{ 'tow-right': index == 0, 'tow-roght1': index == 1 }" class="text">
                                {{ projectItem.productTitle }}
                            </div>
                        </div>
                    </div>

                    <div v-if="item.length == 3" class="line">
                        <div v-for="(projectItem, index) in item" :key="projectItem.id"
                            :class="{ 'three-left': index == 0, 'three-center': index == 1, 'three-right': index == 2 }">

                            <div v-if="projectItem.productImageAddress && projectItem.productTitle" class="three-l">
                                <img :src="$staticPath + projectItem.productImageAddress" alt="">
                            </div>

                            <div class="three-r text"
                                :class="{ quan: !projectItem.productImageAddress || !projectItem.productTitle }">
                                <img v-if="projectItem.productImageAddress && !projectItem.productTitle"
                                    src="@/assets/image/home/61.png" alt="">
                                <div v-if="projectItem.productTitle" class="text">{{ projectItem.productTitle }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <CasePresentation :list="caseList" :caseTitle="caseTitle"/>
    </div>
</template>

<script>
import CasePresentation from '@/components/CasePresentation'
import { mapGetters } from 'vuex'

export default {
    components: {
        CasePresentation
    },
    data() {
        return {
            bannerList: [],        //轮播图列表
            custom: [],        //定制软件开发列表
            projectList: [],       //软件开发产品列表
            caseList: [],      //案例列表
            bannerTitle: [],   //轮播图上方大标题
            bannerClassify: [],        //轮播图上方分类
            bannerDesc: [],    //轮播图上方的简介
            customTitle : [],   //定制软件开发标题
            applicationTiele : [],  //软件开发产品标题
            caseTitle : [], //案例展示标题
            classIdList: ['1827523183415906306', '1827604262051106818', '1828651760777678849', '1828651841698385921', '1828651899315539969','1828650639145291778','1828650553145282561','1828650784192712705'],   //分类id列表
        }
    },
    created() {
        this.queryImage()
        this.getData()
        this.getApplication()
    },
    methods: {

        //获取图片
        queryImage() {
            this.request('queryImage', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId: '1827521806157467649'
            }).then(res => {
                this.bannerList = res
            })
        },

        //查询配置
        queryProgram(classificationId, index) {
            let dateNameList = ['custom', 'caseList', 'bannerTitle', 'bannerClassify', 'bannerDesc','customTitle','applicationTiele','caseTitle']
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId
            }).then(res => {
                this[dateNameList[index]] = res
            })
        },

        //查询软件开发产品数据
        getApplication() {
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId: '1827597732610297857'
            }).then(res => {
                let line1 = res.slice(0, 2)
                let line2 = res.slice(2, 5)
                let line3 = res.slice(5, 8)
                this.projectList.push(line1)
                this.projectList.push(line2)
                this.projectList.push(line3)

            })
        },

        //获取数据
        getData() {
            this.classIdList.forEach((item, index) => {
                this.queryProgram(item, index)
            })
        },

        //路由跳转
        goto(index) {
            let paths = ['/electronicBusiness', '/app', '/applet', '/construct']
            this.$router.push({
                path: paths[index]
            })
        }
    },
    computed: {
        ...mapGetters(["getIsPhont"]),
    }
};
</script>

<style lang="scss" scoped>
.home {

    .banner {
        position: relative;
        overflow: hidden;
        height: 31vw;

        .bg {
            img {
                width: 100%;
            }

            &::v-deep .el-carousel__arrow--left,
            &::v-deep .el-carousel__arrow--right {
                display: none;
                width: 0;
                height: 0;
            }
        }

        .text {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: aliceblue;
            z-index: 9999;
            height: 31vw;

            .title {
                font-size: 2.3vw;
                letter-spacing: 20px;
            }

            .deputy {
                display: flex;
                background-color: #ffffff44;
                margin: 10px;
                border-radius: 1vw;
                font-size: 1.2vw;

                div {
                    margin: 10px 30px;
                    cursor: pointer;
                }
            }

            .fot {

                p {
                    font-size: .9vw;
                    line-height: 2.5vw;
                }
            }
        }
    }

    .customized {
        .develop {
            color: #0190ca;
            font-size: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            letter-spacing: 15px;
            line-height: 50px;
        }

        .dream {
            color: #a7a9b7;
            font-size: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .box {
            display: flex;
            margin-top: 1vw;
            flex-wrap: wrap;

            .wnwu {
                margin-right: 10px;
                width: calc(25% - 10px);

                img {
                    width: 100%;
                }

                .cc {
                    color: #4c4c4c;
                    text-align: center;
                }

                .open {
                    color: #777c92;
                    font-size: 12px;
                    text-align: center;
                }

                .look {
                    text-align: center;
                    font-size: 10px;
                    color: #ff6600;
                    margin: 10px;
                    padding: -80px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &::before {
                        content: "";
                        display: block;
                        width: 10px;
                        height: 10px;
                        background: url(../../assets/image/home/箭头.png);
                        background-size: 100% 100%;
                    }
                }

                &:nth-child(4n) {
                    margin-right: 0;
                }
            }

            .wnwu1 {
                width: calc(50% - 10px);
            }
        }
    }

    .software {
        padding-bottom: 40px;

        .product {
            text-align: center;
            font-size: 20px;
            color: #0190ca;
        }

        .procedure {
            text-align: center;
            margin: 10px;
            color: #a7a9b7;
            font-size: 13px;
        }

        .standard {

            .standard-line {

                .line {
                    display: flex;
                    flex-wrap: wrap;
                    height: 13vw;
                    margin-bottom: .5vw;
                    color: white;
                    text-align: center;
                    font-size: .7em;

                    .tow-l,
                    .tow-r {
                        display: flex;
                        flex-wrap: wrap;
                        height: 100%;
                        width: 33.33%;

                        .tow-left,
                        .tow-right,
                        .tow-left1,
                        .tow-roght1 {
                            width: 50%;
                            height: 100%;
                            background: #FFC094;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .tow-left1,
                        .tow-roght1 {
                            background: #84D5FF;
                        }

                    }

                    .tow-r {
                        width: calc(66.66% - 5px);
                        margin-left: 5px;
                    }

                    .text {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .three-left,
                    .three-center,
                    .three-right {
                        display: flex;
                        width: 33.33%;
                        height: 13vw;

                        .three-l,
                        .three-r {
                            width: 50%;
                            height: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    .three-left {
                        background: #0198F5;
                    }

                    .three-center,
                    .three-right {
                        width: calc(33.33% - 5px);
                        margin-left: 5px;
                    }

                    .three-center {
                        background: #B3C9FF;
                    }

                    .three-right {
                        background: #FFD687;

                        .quan {
                            width: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                            }

                            div {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                }

            }

        }
    }
}
</style>